/*
 * @Description: 盒规则面板
 * @Author: Rfan
 * @Date: 2022-02-10 09:30:53
 * @LastEditTime: 2022-05-25 08:49:34
 */

import type { FC } from 'react';
import { Button, Checkbox, Form, Input, Select } from 'antd';
import classNames from 'classnames/bind';

import styles from '../styles/boxPane.module.scss';

const cx = classNames.bind(styles);

const { Option } = Select;

export type BoxPaneProps = {
  data: any;
};

// 复选框组mock数据
const options = [
  { label: '年度', value: 'year' },
  { label: '分类号', value: 'classify' },
  { label: '保管期限', value: 'period' }
];

/**
 * @description: 盒规则面板
 * @param {*} param1
 * @return {*}
 */
const BoxPane: FC<BoxPaneProps> = ({ data }) => {
  console.log('fond pane:', data);

  const [form] = Form.useForm();

  // const boxPageTipsNode = (
  //   <ol className="box-page">
  //     <li>分组中的页数（1~100000），把分组（自增字段中分组）相同的文件，按排序自动组合。</li>
  //     <li>确认案卷分页数后，卷内序号长度自动提取（如设置"100"，卷内需要长度为3，从001起始）。</li>
  //   </ol>
  // );
  const submitFunc = () => {
    console.log('submit', form);
    form.submit();
  };

  const onFinish = (values: any) => {
    console.log('form finish', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  // 复选框组选择方法
  function onChange(checkedValues: any) {
    console.log('checked = ', checkedValues);
  }

  return (
    <div className={`auto-pane ${cx('box-pane')}`}>
      <div className={cx('box-header')}>
        <div className={cx('title')}>盒规则</div>
        <div className={cx('opearte')}>
          <Button disabled onClick={submitFunc}>
            保存
          </Button>
        </div>
      </div>
      <div className={cx('container')}>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
          preserve={false}
          form={form}
          initialValues={data}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="盒分页数"
            extra="分组中的页数（1~100000），把分组（自增字段中分组）相同的文件，按排序自动组合。"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="盒号长度"
            extra="盒号的标准长度，必须是1~10整数，不够用0补足，如4位就是0001,3位就是001"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="默认规格"
            extra="卷（卷皮、卷盒）的尺寸规格选择，系统默认以案卷分页数指定"
          >
            <Select defaultValue="lucy">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </Form.Item>
          <Form.Item label="设置条件分组" extra="从复选框中选择需要的选项（系统默认全选）">
            <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default BoxPane;
